<template>
	<view>
		<image class="creatRoom3" src="/static/jingyu/creatRoom.png" mode="" @tap="toCreatMyClass"></image>
		<view class="Classlist" v-for="(item,index) in getclasslist" :key="index" @tap="ChosseClass(item)">
			<image :src="item.faceUrl" class="Class_avter"></image>
			<view class="Class_title">
				<view class="Class_infochild">{{item.group_name}}</view>
				<view class="Class_infochild">{{item.label}}</view>
				<view class="Class_infochild">{{item.language}}</view>
			</view>
			<view class="Class_details">
				<image src="../../../static/jingyu/yuyin.png" class="Class_detailschild"></image>
				<view class="Class_detailschild">视频直播课堂</view>
				<view class="Class_detailschild">直播中</view>
				<view class="Class_detailschild">{{item.online_num}}人参与</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				getclasslist:[],
				ClassName:'',
				ClassId:'',
			}
		},
		onLoad() {
			this.getClasslist()
		},
		methods: {	
			getClasslist(){//获取我的班级列表
				let _this = this
				var  ownerid = uni.getStorageSync('user_id')
				var data = {
					owner_id:ownerid,
				}
				_this.myAjaxNew({//获取我的班级列表
					model: 'message',
					controllerName: 'messageGroup',
					actionName: 'queryMyListPage',
					data: data,
					successBack: function(res) {
						_this.getclasslist = _this.getclasslist.concat(res.data.data)
						console.log(_this.getclasslist)
					},
				})
			},
			toCreatMyClass(){//去创建我的班级
				uni.navigateTo({
					url:'/pages/Meet/CreateMyclass/CreateMyclass'
				})
			},
			ChosseClass(item){
				this.ClassName = item.group_name
				this.ClassId = item.group_id
				uni.setStorageSync("ClassName", this.ClassName);
				uni.setStorageSync("ClassId", this.ClassId);
				uni.setStorageSync("group_type", item.type);
				uni.setStorageSync("TheID", item.id);
				uni.setStorageSync("CreatLanguage", item.language);
				uni.setStorageSync("age_grade", item.age_grade);
				uni.navigateBack({
					delta:1
				})
				
				console.log(item,'9999')
			}
		}
	}
</script>

<style lang="less">
.Classlist{
	display: flex;
	height: 130upx;
	width: 90%;
	align-items: center;
	border-bottom: 1upx solid #DCDCDC;
	margin: 0 auto;
	.Class_avter{
		display: flex;
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
}
.Class_title{
	display: flex;
	width: 80%;
	height: 60upx;
	font-size: 26upx;
	margin-top: -30upx;
	align-items: center;
	position: absolute;
	left: 20%;
}
.Class_details{
	display: flex;
	width: 80%;
	height: 40upx;
	margin-top: 30upx;
	font-size: 18upx;
	position: absolute;
	left: 20%;
	image{
		width: 30upx;
		height: 30upx;
	}
}
.Class_infochild:last-child,.Class_detailschild:last-child{
	margin-left: auto;
	padding-right: 20upx;
}
.Class_infochild,.Class_detailschild{
	padding-left: 2%;
}
.Class_detailschild:first-child{
	padding: 0;
}
.creatRoom3 {
	position: fixed;
	right: 0;
	bottom: 200upx;
	width: 160upx;
	height: 160upx;
	z-index: 9999;
}
</style>
